<template>
  <div>
    <!-- 功能一模板 -->
    <button @click="show">显示</button>
    <button @click="hide">隐藏</button>
    <div class="box" v-if="showDiv">一个被控制显隐的div</div>
  </div>
  <div>
    <!-- 功能二模板 -->
    <button @click="changeRed">红色</button>
    <button @click="changeYellow">黄色</button>
    <div class="box" :style="`color:${fontColor}`">一个被控制字体颜色的的div</div>
  </div>
</template>
<style scoped>
.box{width:200px;height: 200px;line-height:200px;background-color: cornflowerblue;text-align: center;}
</style>
<script>
export default {
  name: 'App',
  data() {
    return {
      showDiv: true, // 涉及功能一 的状态
      fontColor: '' // 涉及功能二 的状态
    }
  },
  methods: {
    // 涉及功能一 的方法
    show() {
      this.showDiv = true
    },
    hide() {
      this.showDiv = false
    },

    // 涉及功能二 的方法
    changeRed() {
      this.fontColor = 'red'
    },
    changeYellow() {
      this.fontColor = 'yellow'
    }
  }
}
</script>